<template>
    <div class="pos-a" style="left: 0; right: 0; top: 0; bottom: 0; z-index: 2;">
        <div
            v-for="(item, index) in dots"
            :key="index"
            :style="{
                position: 'absolute',
                width: item.width + 'px',
                height: item.height + 'px',
                //backgroundColor: item.bgColor,
                zIndex: 3,
                left: item.left ? item.left + 'px' : '',
                right: item.right ? item.right + 'px' : '',
                top: item.top ? item.top + 'px' : '',
                bottom: item.bottom ? item.bottom + 'px' : '',
                cursor: item.cursor,
                borderRadius: '50%',
                border: `1px solid ${item.borderColor}`,
                boxSizing: 'border-box',
            }"
            @mousedown.stop="handleDotMousedown($event, item)"
        >
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            // 父组件宽度
            componentWidth: {
                type: Number,
                default: 0
            },
            
            // 父组件高度
            componentHeight: {
                type: Number,
                default: 0
            },

            // 父组件
            fatherCurrentRow: {
                type: Object | null,
                default: null
            }
        },

        watch: {
            // 监听高度变化，重新渲染手柄
            componentHeight(newVal, oldVal) {
                this.initDots()
            }
        },

        computed: {
            
        },

        created() {
            this.initDots() 
        },


        data() {
            return {
                dots: [], // 点集合
                startX: null, // 起始x
                startY: null, // 起始y
                currentRow: null, // 当前拖动的行
                isMoving: false, // 是否正在拖动
            }
        },

        methods: {
            // 初始化点
            initDots() {
                // 获取屏幕缩放倍率
                let ratio = window.devicePixelRatio || 1
                let dotW = 6 * ratio
                let dotH = 6 * ratio
                let borderColor = '#1e9fff'
                let bgColor = '#ffffff'

                this.dots = [
                    { name: '东北', handle: 'ne', borderColor, bgColor, value: 1, width: dotW, height: dotH, left: null, right: -(dotW / 2), top: -(dotW / 2), bottom: null, cursor: 'ne-resize' },
                    { name: '东南', handle: 'se', borderColor, bgColor, value: 3, width: dotW, height: dotH, left: null, right: -(dotW / 2), top: null, bottom: -(dotW / 2), cursor: 'se-resize' },
                    { name: '西南', handle: 'sw', borderColor, bgColor, value: 5, width: dotW, height: dotH, left: -(dotW / 2), right: null, top: null, bottom: -(dotW / 2), cursor: 'sw-resize' },
                    { name: '西北', handle: 'nw', borderColor, bgColor, value: 7, width: dotW, height: dotH, left: -(dotW / 2), right: null, top: -(dotW / 2), bottom: null, cursor: 'nw-resize' },
                ]
            },

            // 鼠标按下手柄时的回调
            handleDotMousedown(e, item) {
                // 记录起始值
                this.startX = e.clientX
                this.startY = e.clientY
                this.startHeight = this.fatherCurrentRow.height
                this.startTop = this.fatherCurrentRow.top
                this.currentRow = item
                this.isMoving = true
                document.addEventListener('mousemove', this.handleDotMousemove)
                document.addEventListener('mouseup', this.handleDotMouseup)
                e.preventDefault()
            },

            // 鼠标拖动手柄时的回调
            handleDotMousemove(e) {
                if (!this.isMoving) return
                this.$emit('handleDotMousemove', {
                    dotStartX: this.startX,
                    dotStartY: this.startY,
                    startHeight: this.startHeight,
                    startTop: this.startTop,
                    dotCurrentRow: this.currentRow,
                    e,
                    fatherCurrentRow: this.fatherCurrentRow
                })
                e.preventDefault()
            },

            // 鼠标抬起手柄时的回调
            handleDotMouseup() {
                this.startX = null
                this.startY = null
                this.currentRow = null
                this.isMoving = false
                document.removeEventListener('mousemove', this.handleDotMousemove)
                document.removeEventListener('mouseup', this.handleDotMouseup)
            },

        }
    }
</script>